:host {
  display: inline-block;
  max-width: 100%;
}

.badge {
  --bg-color: var(--bl-badge-bg-color, var(--bl-color-primary-contrast));
  --color: var(--bl-badge-color, var(--bl-color-primary));
  --font: var(--bl-font-title-4-medium);
  --padding-vertical: var(--bl-size-4xs);
  --padding-horizontal: var(--bl-size-3xs);
  --margin-icon: var(--bl-size-3xs);
  --icon-size: var(--bl-size-s);
  --height: var(--bl-size-xl);

  display: flex;
  gap: var(--margin-icon);
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  border: none;
  border-radius: var(--bl-size-4xs);
  margin: 0;
  padding: var(--padding-vertical) var(--padding-horizontal);
  background-color: var(--bg-color);
  color: var(--color, white);
  font: var(--font);
  font-kerning: none;
  height: var(--height);
}

:host([size="small"]) .badge {
  --font: var(--bl-font-caption);
  --height: var(--bl-size-m);
}

:host([size="large"]) .badge {
  --font: var(--bl-font-title-3-medium);
  --padding-vertical: var(--bl-size-2xs);
  --padding-horizontal: var(--bl-size-2xs);
  --height: var(--bl-size-2xl);
  --icon-size: var(--bl-size-m);
}

:host ::slotted(bl-icon) {
  font-size: var(--icon-size);
}

:host([size="small"]) bl-icon {
  display: none;
}
